<extend name="template/base_index" />


<block name="area_header">

	<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
	<style type="text/css">
		.select2-container--default .select2-selection--single .select2-selection__placeholder{
	color:#E7E7E7;
}
.select2-container--default .select2-selection--single {
  background-color: #2780e3;
  border: 0px solid #aaa;
  border-radius: 4px;
}
.select2-container{
  background: #2780e3;
  color: #fff;
  padding: 2px;
  margin: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #F5F5F5;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field{
  	color:#444;
  }
		
	</style>
	<script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.full.js"></script>
	<script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
</block>

<block name="area_body">
	{:W('Menus/topbar')}
	<div class="admin-main container-fluid">
		{:W('Menus/left')}
		<div class="admin-main-content">
			{:W('Menus/breadcrumb')}
			<div class="table-responsive well ">

						<!-- 过滤\查询按钮 -->
						<div class="filter-controls pull-right">
							<form class="form-inline groupForm" method="post">
								<div class="form-group-sm">
									<label class="control-label">当前会员组</label>
									<select id="groups"  name="groupid" class="form-control">
										<volist name="groups" id="vo">
											<option <eq name="groupid" value="$vo.id">selected="selected"</eq> value="{$vo.id}" >{$vo.name}</option>
										</volist>
									</select>
								</div>
							</form>
						</div>

						<!-- 过滤\查询按钮 -->
						<div class="filter-controls pull-left">
							<form action="" class="addToGroupForm" method="post">
								<input type="hidden" name="groupid" value="{$groupid}" />
								<select style="width:220px;padding: 10px 15px;font-size: 15px;line-height: 1.42857143;" id="user_select2" name="uid" class="form-control">
 <option></option>
								</select>
								<a id="addtogroup" target-form="addToGroupForm" class="ajax-post btn btn-sm btn-primary" href="{:U('Admin/Wxuser/addToGroup')}">添加到</a>
							</form>
						</div>

						<!-- 列表开始 -->
						<table class="table table-striped table table-hover  table-condensed">
							<thead>
								<tr>
									<th>
										ID
									</th>
									<th>
										昵称
									</th>
									<th>
										头像
									</th>
									<th>
										关注时间
									</th>
									<th>
										状态
									</th>
									<th>
										{:L('OPERATOR')}
									</th>
								</tr>
							</thead>
							<tbody>
								<empty name="list">
									<tr>
										<td colspan="6" class="text-center">{:L('NO_DATA')}</td>
									</tr>
									<else/>
									<volist name="list" id="vo">
										<tr>
											<td>
												{$vo.id}</td>
											<td>{$vo.nickname}</td>
											<td>
												<img class="thumbnail avatar"  style="max-width: 40px;" src="{$vo.avatar}" />
											</td>
											<td>{$vo.subscribe_time|date='Y-m-d H:i:s',###}
											</td>
											<td>{$vo.status|getStatus}</td>
											<td>
												<a href="{:U('Admin/Wxuser/delFromGroup',array('uid'=>$vo['id'],'groupid'=>$groupid))}" class="ajax-get btn btn-default btn-sm"><i class="fa fa-eye"></i>解除授权</a>
											</td>
										</tr>

									</volist>
								</empty>
							</tbody>
						</table>
						<div>{$show}</div>
						<!-- 列表结束 -->

			</div>
		</div>
		<!-- END admin-main-content -->
	</div>
		<!-- END admin-main-->
</block>

<block name="area_footer">
<script type="text/javascript">
	
	$(function(){
		
		
		
		$("#groups").change(function(){
			$(".groupForm").submit();
		});
		$("#addtogroup").text("添加到"+$("#groups").find("option:selected").text());
		$("#user_select2").select2({
			placeholder: "输入用户id或昵称查询"	,
			language: "zh-CN",
			ajax: {
			    url: "{:U('Wxuser/select')}",
			    dataType: 'json',
			    delay: 250,
			    data: function (params) {
			    	var queryParameters = {
				      q: params.term
				    }
    				return queryParameters;
			      
			    },
			    processResults: function (data, page) {
			    	if(!data.info){
			    		data.info = new Array();
			    		data.info['nodata']="无相关数据";
			    	}
			      	// parse the results into the format expected by Select2.
			      	// since we are using custom formatting functions we do not need to
			      	// alter the remote JSON data
			      	return {
			        	results: data.info
			      	};
			    },
			    cache: true
		  	}, 
			  	minimumInputLength: 0,
				templateSelection: function (repo) {	
	  				return repo.nickname || repo.text;
				},
			  templateResult: function (repo) {
			   		
      				if (repo.loading) return repo.text;
					if(repo.nodata) return repo.nodata;
//    				var markup = '<div>'+repo.nickname+'</div>';
      				var markup = '<div><img src="'+repo.avatar+'" style="width:30px;height:30px;"/>[id:'+repo.id+'] '+repo.nickname+'</div>';
      				return markup;
    			},
		});
		
		
	})
	</script>
</block>